<template>
    <div>
        <!--搜索区域-->
        <el-card class="filter-card">
            <div slot="header">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item >首页</el-breadcrumb-item>
                    <el-breadcrumb-item>文章管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-form ref="form" :v-model="form" label-width="40px" size="mini">
                    <el-form-item label="状态">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="null">全部</el-radio>
                            <el-radio :label="0">草稿</el-radio>
                            <el-radio :label="1">待审核</el-radio>
                            <el-radio :label="2">审核通过</el-radio>
                            <el-radio :label="3">审核失败</el-radio>
                            <el-radio :label="4">已删除</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="频道">
                        <el-select v-model="form.channel_id">
                            <el-option 
                                v-for="(item) in channels"
                                :key="item.id"
                                :value="item.id" 
                                :label="item.name">
                                </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="日期">
                        <el-date-picker
                            v-model="form.date1"
                            type="datetimerange"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            start-placeholde="开始日期"
                            end-placeholde="结束如期"
                            :default-time="['12:00:00']"
                        ></el-date-picker>
                    </el-form-item>

                    <el-form-item >
                        <el-button type="primary" @click="handleClickSearch">
                            查询
                        </el-button>
                    </el-form-item>

                </el-form>
        </el-card>

        <el-card class="box-card">
            <div slot="header">
                <div>根据筛选条件共查询到{{total}}条结果</div>
            </div>
            <el-table
                :data="tableData"
                stripe
                style="width:100%"
                class="list-table"
                size="mini"
            >
                <el-table-column
                    label="封面"
                    width="180"
                >
                    <template slot-scope="scope">
                        <img :src="scope.row.cover.images[0]" width="120" >
                    </template>
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="标题"
                    width="180"
                ></el-table-column>
                <el-table-column
                    label="状态"
                >
                    <template slot-scope="scope">
                        <span>{{getStatus(scope.row.status)}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="pubdate"
                    label="发布时间"
                ></el-table-column>
                <el-table-column
                    label="操作"
                >
                    <template slot-scope="scope">
                        <el-button
                            icon="el-icon-edit"
                            @click.native.prevent="editRow(scope.row)"
                            size="small"
                            circle>
                        </el-button>
                        <el-button
                            icon="el-icon-delete"
                            @click.native.prevent="deleteRow(scope.row)"
                            type="danger"
                            size="small"
                            circle>
                            
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination
                    background
                    @current-change="currentChange"
                    layout="prev, pager, next"
                    :current-page.sync="pageNum"
                    :total="total">
                </el-pagination>
            </div>
        </el-card>
        

    </div>
</template>
<script>
import {api_articles,api_channels,api_delArticles} from '@/api/articles'
import JSONbig from 'json-bigint'
export default {
    data(){
        return{
            total:1000,
            pageNum:1,
            form:{
                status:null,
                channel_id:'',
                date1:'',
                begin_pubdate:'',
                end_pubdate:''
            },
            tableData:[],
            channels:[]
        }
    },
    methods:{
        handleClickSearch(){
            this.pageNum = 1
            this.getList()
        },
        editRow(row){
            this.$router.push({
                path:"/editArticle",
                query:{
                    item:row.id.toString()
                }

            })
        },
        deleteRow(row){
            
            api_delArticles(row.id.toString()).then((res)=>{
                this.$message.success(res.data.message)
                this.getList()
            })
        },
        getStatus(status){
            const statusObj = {
                0:'草稿',
                1:'待审核',
                2:'审核通过',
                3:'审核失败',
                4:'已删除',
                5:'失效',
            }
            return statusObj[status]
        },
        getList(){
            if(this.form.date1){
                this.form.begin_pubdate = this.form.date1[0]
                this.form.end_pubdate = this.form.date1[1]
            }else{
                this.form.begin_pubdate = ''
                this.form.end_pubdate = ''
            }
            let params = {
                page:this.pageNum,
                status:this.form.status,
            }
            if(this.form.channel_id){
                params.channel_id=this.form.channel_id
            }
            if(this.form.begin_pubdate){
                params.begin_pubdate=this.form.begin_pubdate
            }
            if(this.form.end_pubdate){
                params.end_pubdate=this.form.end_pubdate
            }

            api_articles(params).then((res)=>{
                this.tableData = res.data.data.results
                this.total = res.data.data.total_count
                this.tableData.forEach(element => {
                    if(element.cover.images.length < 1){
                        element.cover.images.push("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606068040440&di=741b53265a14858cd0840cba11d89ae9&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw1075h604%2F20180227%2Fbc70-fyrwsqi9521695.png")
                    }
                });
            })
        },
        currentChange(page){
            this.pageNum = page
            this.getList()
        },
        //获取文章频道
        getChannels(){
            api_channels().then((res)=>{
                console.log("文章频道=",res)
                this.channels = res.data.data.channels
            })
        }
    },
    mounted(){
        this.getList();
        this.getChannels()
    }
}
</script>
<style scoped>
    .box-card{
        margin-top: 20px;
    }
    .page{
        margin-top: 20px;
    }
</style>